<template>
  <div v-if="currOption" class="my-filter">
    <template v-if="filterInfo.type === 'input'">
      <el-input mode="text" v-model="currOption.data" placeholder="请输入" @input="changeOptionEvent"></el-input>
    </template>
    <template v-if="filterInfo.type === 'select'">
      <el-select v-model="currOption.data" placeholder="请选择" :teleported="false" @change="changeOptionEvent" style="width: 180px">
        <el-option v-for="op,i in filterInfo.alternativeOption" :label="op.label" :value="op.value" :key="i"></el-option>
      </el-select>
    </template>
    <template v-if="filterInfo.type === 'date'">
      <el-date-picker v-model="currOption.data" type="date" value-format="YYYY-MM-DD" :editable="false" placeholder="选择日期" :teleported="false" @change="changeOptionEvent" style="width:180px;"></el-date-picker>
    </template>
    <template v-if="filterInfo.type === 'dateRange'">
      <el-date-picker v-model="currOption.data" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :teleported="false" @change="changeOptionEvent" style="width: 220px;"></el-date-picker>
    </template>
    <template v-if="filterInfo.type === 'radioGroup'">
      <el-radio-group v-model="currOption.data" @change="changeOptionEvent">
        <el-radio v-for="op,i in filterInfo.alternativeOption" :key="i" :value="op.value" >{{ op.label }}</el-radio>
      </el-radio-group>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, computed,reactive } from 'vue'
import { ElInput, ElSelect, ElOption, ElDatePicker, ElRadioGroup, ElRadio } from "element-plus";

const props = defineProps({
  renderParams: {
    type: Object,
    require:true,
    default: () => ({})
  },
  filterRender:{
    type:Object,
    require:false,
    default:() => ({})
  }
})

const currOption = ref();

interface filterInfoType {
  name:String,  //组件名称
  type:String,  //筛选类型 input|select|date|dateRange|radioGroup
  alternativeOption:Object[]  //备选项
}

const filterInfo = reactive<filterInfoType>({
  name:"customizeFilter",
  type:"input",
  alternativeOption:[]
})

const currField = computed(() => {
  const { column } = props.renderParams || {}
  return column ? column.field : '';
})

const load = () => {
  const { renderParams,filterRender } = props;
  if (renderParams) {
    const { column } = renderParams;
    const option = column.filters[0];
    currOption.value = option;
  }
  initFilterInfo(filterRender);
}

const changeOptionEvent = () => {
  const { renderParams } = props
  const option = currOption.value;
  if (renderParams && option) {
    const { $table } = renderParams;
    const checked = !!option.data;
    $table.updateFilterOptionStatus(option, checked);
  }
}

const initFilterInfo = (filterRender:any) => {
  const filterRenderKeys = Object.keys(filterRender || {});
  for(let k = 0; k < filterRenderKeys.length; k ++){
    if(filterRender[filterRenderKeys[k]]){
      filterInfo[filterRenderKeys[k]] = filterRender[filterRenderKeys[k]];
    }
  }
}

watch(currField, () => {
  load();
})

load();
</script>

<style lang="scss" scoped>
.my-filter {
  padding: 10px;
}
</style>
